<template>
  <div class="wrapper">
    <div class="dialysis-chart">
      <v-chart :options="dialysisFrequencyChartOptions" />
    </div>
    <div class="target-chart">
      <v-chart :options="ktvChartOptions" />
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    dialysisChartData: {
      type: Array,
      default: () => {
        return []
      }
    },
    ktvChartData: {
      type: Number,
      default: () => {
        return 0.0
      }
    },
    urrChartData: {
      type: Number,
      default: () => {
        return 0.0
      }
    }
  },
  computed: {
    ktvChartOptions() {
      if (this.ktvChartData === 0 || this.ktvChartData > 0) {
        const _color = [
          // 改变这个地方可以修改进度
          [0.75, '#22e089'], // [this.ktvChartData, '#6d76c9'],
          [1, '#FFF'] // [1, '#dfe6ec']
        ]
        return {
          title: {
            text: '指标合格率',
            left: '0px',
            top: '5px',
            bottom: '0px',
            textStyle: {
              color: '#666',
              fontSize: 16,
              fontWeight: '700'
            }
          },
          grid: {
            left: '5%'

          },
          backgroundColor: 'rgba(255,255,255,0.1)',
          series: [
            {
              name: '业务指标',
              type: 'gauge',
              min: 0,
              max: 100,
              center: ['30%', '65%'],
              pointer: { show: false },
              radius: '65%',
              itemStyle: {
                normal: {
                  color: '#323232'
                }
              },
              splitLine: { show: false },
              axisTick: {
                show: false
              },
              axisLabel: {
                color: '#333',
                show: false,
                fontSize: 12,
                distance: -20,
                formatter: (v) => {
                  if (v === 0 || v === 100) return v
                }
              },
              axisLine: {
                lineStyle: {
                  width: 11,
                  color: _color
                }
              },
              detail: {
                formatter(e) {
                  return 'Kt/v 合格率'
                },
                color: '#555',
                fontSize: 13,
                fontWeight: 600,
                offsetCenter: [-5, 60],
                borderRadius: 8
              },
              title: {
                offsetCenter: [-5, 0],
                color: '#333',
                fontSize: 22,
                fontWeight: 700,
                rich: {
                  a: {
                    fontWeight: 'normal',
                    fontSize: 15,
                    color: '#FFF',
                    padding: [0, 0, 10, 20]
                  }
                }
              },
              data: [
                {
                  // name: `${this.ktvChartData}%`,
                  // value: this.ktvChartData
                  name: '75%',
                  value: 75
                }
              ]
            },
            {
              name: '业务指标',
              type: 'gauge',
              min: 0,
              max: 100,
              center: ['68%', '65%'],
              pointer: { show: false },
              radius: '65%',
              itemStyle: {
                normal: {
                  color: '#323232'
                }
              },
              splitLine: { show: false },
              axisTick: {
                show: false
              },
              axisLabel: {
                color: '#333',
                show: false,
                fontSize: 12,
                distance: -20
              },
              axisLine: {
                lineStyle: {
                  width: 11,
                  color: [
                    // 改变这个地方可以修改进度,接数据要修改这里
                    [0.6, '#f6de54'], // [this.urrChartData, '#4796f4'],
                    [1, '#FFF'] // [1, '#dfe6ec']
                  ]
                }
              },
              detail: {
                formatter(e) {
                  return 'URR 合格率'
                },
                color: '#555',
                fontSize: 13,
                fontWeight: 600,
                offsetCenter: [5, 60],
                borderRadius: 8
              },
              title: {
                offsetCenter: [5, 0],
                color: '#333',
                fontSize: 22,
                fontWeight: 700,
                rich: {
                  a: {
                    fontWeight: 'normal',
                    fontSize: 15,
                    color: '#FFF',
                    padding: [0, 0, 10, 20]
                  }
                }
              },
              data: [
                {
                  // name: `${this.urrChartData * 100}%`,
                  // value: this.urrChartData * 100
                  name: '60%',
                  value: 60
                }
              ]
            }
          ]
        }
      }
      return null
    },
    urrChartOptions() {
      if (this.urrChartData === 0 || this.urrChartData > 0) {
        return {
          backgroundColor: 'rgba(255,255,255,0.1)',
          series: [
            {
              name: '业务指标',
              type: 'gauge',
              min: 0,
              max: 100,
              center: ['35%', '50%'],
              pointer: { show: false },
              itemStyle: {
                normal: {
                  color: '#323232'
                }
              },
              splitLine: { show: false },
              axisTick: {
                show: false
              },
              axisLabel: {
                color: '#333',
                show: false,
                fontSize: 12,
                distance: -20
              },
              axisLine: {
                lineStyle: {
                  width: 8,
                  color: [
                    // 改变这个地方可以修改进度,接数据要修改这里
                    [0.6, '#f6de54'], // [this.urrChartData, '#4796f4'],
                    [1, '#FFF'] // [1, '#dfe6ec']
                  ]
                }
              },
              detail: {
                formatter(e) {
                  return 'URR 合格率'
                },
                color: '#333',
                fontSize: 13,
                offsetCenter: [0, 60],
                borderRadius: 8
              },
              title: {
                offsetCenter: [0, 0],
                color: '#333',
                fontSize: 17,
                fontWeight: 500,
                rich: {
                  a: {
                    fontWeight: 'normal',
                    fontSize: 15,
                    color: '#FFF',
                    padding: [0, 0, 10, 20]
                  }
                }
              },
              data: [
                {
                  // name: `${this.urrChartData * 100}%`,
                  // value: this.urrChartData * 100
                  name: '60%',
                  value: 60
                }
              ]
            }
          ]
        }
      }
      return null
    },
    dialysisFrequencyChartOptions() {
      let res = this.dialysisChartData
      if (res) {
        const _data1 = []
        const _data2 = []
        // const _colors = ['#9CE4B7', '#7ED3F4', '#9fe080', '#FFDC60', '#5C7BD9', '#EE6666']
        res = res.map((item, index) => {
          _data1.push({
            name: item.frequency,
            value: Math.floor(100 / res.length) * (index + 1),
            total: item.total,
            ratio: item.ratio,
            percent: item.percent
          })
          _data2.push({
            name: item.frequency,
            value: item.percent
          })
        })
        // console.log('1111====', _data1)
        // console.log('2222====', _data2.reverse())
        return {
          backgroundColor: 'transparent',
          color: [
            '#4DCBE9',
            '#98D7C9',
            '#F6DE54',
            '#9fe080',
            '#FFDC60',
            '#5C7BD9'
          ],
          title: {
            text: '透析频次',
            left: '0px',
            top: '5px',
            bottom: '10px',
            textStyle: {
              color: '#666',
              fontSize: 16,
              fontWeight: '700'
            }
          },
          // tooltip: {
          //   trigger: 'item',
          //   formatter: (v) => {
          //     return `${v.data.name}</br> 共:${v.data.total}人<br/>占比:(${v.data.percent})`
          //   }
          // },
          series: [
            {
              name: '透析频次',
              type: 'funnel',
              left: '0%',
              width: '80%',
              height: '140px',
              label: {
                formatter: '{b}',
                color: '#333'
              },
              labelLine: {
                show: false
              },
              itemStyle: {
                opacity: 0.7
              },
              emphasis: {
                label: {
                  position: 'inside'
                  // formatter: '{b}: {c}'
                }
              },
              data: _data1
              // [
              //   { value: 60, name: '访问' },
              //   { value: 40, name: '咨询' },
              //   { value: 20, name: '订单' },
              //   { value: 80, name: '点击' },
              //   { value: 100, name: '展现' }
              // ]
            },
            {
              name: '实际',
              type: 'funnel',
              left: '0%',
              width: '80%',
              maxSize: '80%',
              height: '140px',
              label: {
                position: 'inside',
                formatter: '{c}',
                color: '#333'
              },
              itemStyle: {
                opacity: 0.5,
                borderColor: '#fff',
                borderWidth: 2
              },
              // emphasis: {
              //   label: {
              //     position: 'inside',
              //     formatter: '{b}实际: {c}%'
              //   }
              // },
              data: _data2,
              // [
              //   { value: 30, name: '访问' },
              //   { value: 10, name: '咨询' },
              //   { value: 5, name: '订单' },
              //   { value: 50, name: '点击' },
              //   { value: 80, name: '展现' }
              // ],
              // Ensure outer shape will not be over inner shape when hover.
              z: 100
            }
          ]
          // [
          //   {
          //     name: '透析频次',
          //     type: 'funnel',
          //     left: 0,
          //     width: '85%',
          //     height: '140px',
          //     label: {
          //       normal: {
          //         show: true,
          //         color: '#000'
          //       }
          //     },
          //     labelLine: {
          //       show: false
          //     },
          //     data: _data
          //   },
          //   {
          //     name: '透析频次',
          //     type: 'funnel',
          //     width: '70%',
          //     height: '120px',
          //     left: 0,
          //     label: {
          //       position: 'inside',
          //       formatter: '{c}%',
          //       color: '#fff'
          //     },
          //     labelLine: {
          //       show: false
          //     },
          //     data: _data
          //   }
          // ]
        }
      }
      return null
    }
  }
}
</script>
<style lang="scss" scoped>
.wrapper {
  display: flex;
  .dialysis-chart {
    background: transparent;
    width: 250px;
    height: 198px;
  }
  .target-chart {
    background: transparent;
    width: 230px;
    height: 198px;
    display: flex;
    z-index: 10;
  }
}
</style>
